<template>
	<view>
		<view class="header">
			<view class="box">
				<text class="head-title">借贷</text>
				<input type="text" placeholder-style="color:#CCCCCC;font-size:24rpx" placeholder="搜索相关信息" class="head-search" />
				<image src="../../static/AuspiciousBorrow/xinxi.png" class="message"></image>
			</view>
			<view class="main-top">
				<text class="one-text">最高可借额度(元)</text>
				<text class="two-text">200,000.00</text>
				<text class="three-text">审批便捷|年综合费率最低可至7.2%</text>
				<text class="four-text">同意协议并领取</text>
				<view class="text-box"><text class="five-text">同意</text><text class="six-text">祥瑞借贷协议及信息授权</text></view>
				<view class="text-box1">
					<view class="get">
						<text>三步</text>
						<text>领取</text>
					</view>
					<view class="get1">
						<text class="circle">1</text>
						<view>
							<text class="name">实名认证</text>
							<text class="jiantou">--></text>
						</view>
						<text class="circle">2</text>
						<view>
							<text class="name">银行卡认证</text>
							<text class="jiantou">--></text>
						</view>
						
						<text class="circle">3</text>
						<text class="name">信用评估</text>
					</view>
				</view>
			</view>
			<view class="background"></view>
		</view>
		
		<view class="main">
			<view class="fenlei-box">
				<image src="../../static/AuspiciousBorrow/fenlei1.png" class="fenlei-image"></image>
				<text class="fenlei-text">抢疯了</text>
			</view>
			<view class="fenlei-box">
				<image src="../../static/AuspiciousBorrow/fenlei2.png" class="fenlei-image fenlei-mianxi"></image>
				<text class="fenlei-text">30天免息</text>
			</view>
			<view class="fenlei-box">
				<image src="../../static/AuspiciousBorrow/fenlei3.png" class="fenlei-image"></image>
				<text class="fenlei-text">做任务</text>
			</view>
			<view class="fenlei-box">
				<image src="../../static/AuspiciousBorrow/fenlei4.png" class="fenlei-image"></image>
				<text class="fenlei-text">兑好礼</text>
			</view>
			<view class="fenlei-box">
				<image src="../../static/AuspiciousBorrow/fenlei5.png" class="fenlei-image"></image>
				<text class="fenlei-text">赚奖励</text>
			</view>
		</view>
		
		<view class="tips"><text>新人专享礼</text></view>
		<view class="youhuiquan">
			<swiper class="swiper" next-margin="40rpx" snap-to-edge='true'>
				<swiper-item class="swiperbox">
					<view class="swiper-item1">
						<view class="item1">
							<view class="item1-circle">
								<text class="zuigao">最高</text>
								<text class="num">90</text>
								<text class="price">元</text>
							</view>
						</view>
						<view class="item2">
							<view class="item2-box1">
								<text class="item2-box1-text1">新人免息券</text>
								<text class="item2-box1-text2">祥瑞借首次借款可用</text>
							</view>
							<view class="item2-box2">
								<text class="item2-box2-text1">获取额度</text>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiperbox">
					<view class="swiper-item2">
						<view class="item1">
							<view class="item1-circle">
								<text class="zuigao">最高</text>
								<text class="num">80</text>
								<text class="price">元</text>
							</view>
						</view>
						<view class="item2">
							<view class="item2-box1">
								<text class="item2-box1-text1">邀请折扣券</text>
								<text class="item2-box1-text2">祥瑞借邀请新人可用</text>
							</view>
							<view class="item2-box2">
								<text class="item2-box2-text2">获取额度</text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="tips"><text>省心借钱</text><text class="tips-text">借现金</text><text class="tips-text">更懂你</text></view>
		<view class="getMoney">
			<view>
				<text>升级贷</text>
				<view class="getMoney-box1-text2">
					<view class="xinyong">
						<text>纯信用</text>
					</view>
					
					<text class="edu">额度循环</text>
					<text class="jiehuan">随借随还</text>
				</view>
				<view class="getMoney-box1-text3">
					<text class="topedu">最高可借额度(元)</text>
					<text class="topprice">300,000.00</text>
				</view>
			</view>
			<view class="getMoney-box2">
				<text>去开通</text>
			</view>
		</view>
		<view class="getMoney">
			<view class="getMoney-box1">
				<view class="shengxin">
					<text>省心借</text><text class="fuwu">本服务由瑞祥消费金融提供</text>
				</view>
				<view class="shengxin-bottom">
					<view class="rixi">
						<text>日息低至万三</text>
					</view>
					<text class="daozhang">门槛低到账快</text>
				</view>
				<view class="getMoney-box1-text3">
					<text class="topedu">最高可借额度(元)</text>
					<text class="topprice">200,000.00</text>
				</view>
			</view>
			<view class="getMoney-box2">
				<text>去开通</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.header {
		background-color: #007AFF;
		width: 750rpx;
		height: 660rpx;
		overflow: hidden;
		position: relative;
		
	}
	.box {
		width: 700rpx;
		height: 60rpx;
		background-color: #007AFF;
		margin: 0 auto;
		margin-top: 10rpx;
		margin-bottom: 40rpx;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
		justify-content: space-between;
	}
	.message {
		width: 44rpx;
		height: 44rpx;
		margin-top: 10rpx;
	}
	.head-title {
		color: #FFFFFF;
		font-size: 40rpx;
	}
	.head-search {
		width: 520rpx;
		height: 60rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 50rpx;
		padding: 0 50rpx;
		position: relative;
	}
	.head-search::before{
		content: "";
		width: 28rpx;
		height: 28rpx;
		background-image: url(../../static/AuspiciousBorrow/search.png);
		background-size: cover;
		position: absolute;
		z-index: 10;
		left: 15rpx;
		top: 15rpx;
	}
	.main-top{
		width: 700rpx;
		height: 540rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
		z-index: 2;
	}
	.one-text{
		color: #666666;
		font-size: 24rpx;
		letter-spacing:1rpx;
		margin-top: 40rpx;
		margin-bottom: 24rpx;
	}
	.two-text{
		font-size: 44rpx;
		color: #333333;
		font-weight: bold;
	}
	.three-text{
		font-size: 24rpx;
		color: #999999;
		letter-spacing:1rpx;
		margin: 44rpx 0;
	}
	.four-text{
		height: 88rpx;
		width: 525rpx;
		background-color: #007AFF;
		color: #FFFFFF;
		font-size: 28rpx;
		font-weight: bold;
		text-align: center;
		line-height: 88rpx;
		border-radius: 45rpx;
		letter-spacing:2rpx;
		position: relative;
	}
	.four-text::after{
		content: "开通享最高80元免息";
		font-size: 20rpx;
		color: #FFFFFF;
		background-image: url(../../static/AuspiciousBorrow/title.png);
		background-size: cover;
		height: 49rpx;
		width: 235rpx;
		line-height: 40rpx;
		position: absolute;
		top:-30rpx;
		right: 35rpx;
	}
	.five-text{
		font-size: 20rpx;
		color: #999999;
		letter-spacing:1rpx;
	}
	.six-text{
		font-size: 20rpx;
		color: #3476f1;
		letter-spacing:1rpx;
	}
	.text-box{
		margin: 24rpx 0;
	}
	.text-box1{
		width: 655rpx;
		height: 64rpx;
		background-color: rgba(52,118,241,0.1);
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.get{
		font-size: 18rpx;
		color: #333333;
		width: 48rpx;
		height: 48rpx;
		display: flex;
		flex-direction: column;
	}
	.name{
		font-size: 24rpx;
	}
	.jiantou{
		color: #CCCCCC;
		font-size: 30rpx;
	}
	.circle{
		width: 32rpx;
		height: 32rpx;
		background-color: #FFFFFF;
		color: #333333;
		border-radius: 50rpx;
		font-size: 20rpx;
		text-align: center;
		line-height: 32rpx;
	}
	.get1{
		width: 540rpx;
		height: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.background{
		width: 750rpx;
		height: 450rpx;
		background-color: #FFFFFF;
		position: absolute;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		z-index: 0;
		bottom:0rpx;
	}
	.main{
		width: 700rpx;
		height: 140rpx;
		margin: 0 auto;
		/* background-color: #CCCCCC; */
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.fenlei-box{
		width: 120rpx;
		height: 130rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
	.fenlei-image{
		width: 90rpx;
		height: 90rpx;
		position: relative;
	}
	.fenlei-mianxi::after{
		content: "免息";
		width: 50rpx;
		height: 25rpx;
		text-align: center;
		background-image: url(../../static/AuspiciousBorrow/mianxi.png);
		background-size: cover;
		position: absolute;
		font-size: 18rpx;
		top:0rpx;
		right: 0rpx;
		color: #FFFFFF;	
	}
	.fenlei-text{
		font-size: 24rpx;
		color: #666666;
	}
	.tips{
		width: 700rpx;
		height: 35rpx;
		line-height: 35rpx;
		box-sizing: border-box;
		padding: 0 15rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		border-left: 10rpx solid #007AFF;
	}
	.youhuiquan{
		width: 700rpx;
		margin: 0 auto;
	}
	.swiper{
		width: 700rpx;
		height: 156rpx;
		margin-top: 30rpx;
	}
	.swiper-item1{
		width: 646rpx;
		height: 156rpx;
		border-radius: 15rpx;
		background-color: #e2bc7f;
		display: flex;
	}
	.item1{
		width: 190rpx;
		height: 156rpx;
		border-right:3rpx dashed #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.item1-circle{
		width: 100%;
		text-align: center;
	}
	.item1::after{
		content: "";
		width: 24rpx;
		height: 24rpx;
		background-color: #FFFFFF;
		border-radius: 50%;
		position: absolute;
		top:-12rpx;
		right: -14rpx;
	}
	.item1::before{
		content: "";
		width: 24rpx;
		height: 24rpx;
		background-color: #FFFFFF;
		border-radius: 50%;
		position: absolute;
		bottom:-12rpx;
		right: -14rpx;
	}
	.zuigao{
		writing-mode: tb-rl;
		font-size: 23rpx;
		color: #FFFFFF;
	}
	.num{
		font-size: 59rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
	.price{
		font-size: 26rpx;
		color: #FFFFFF;
	}
	.item2{
		flex-grow: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		justify-content: space-evenly;
	}
	.item2-box1{
		display: flex;
		flex-direction: column;
	}
	.item2-box1-text1{
		font-size: 28rpx;
		color: #FFFFFF;
	}
	.item2-box1-text2{
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.item2-box2{
		height: 50rpx;
		width: 158rpx;
		background-color: #FFFFFF;
		border-radius: 25rpx;
		text-align: center;
	}
	.item2-box2-text1{
		font-size: 24rpx;
		color: #E2BC7F;
	}
	.item2-box2-text2{
		font-size: 24rpx;
		color: #f95c5c;
	}
	.swiper-item2{
		width: 646rpx;
		height: 156rpx;
		border-radius: 15rpx;
		background-color: #f95c5c;
		display: flex;
	}
	.tips-text{
		color: #CCCCCC;
		font-size: 24rpx;
		margin-left: 10rpx;
	}
	.getMoney{
		width: 700rpx;
		height: 230rpx;
		margin: 30rpx auto;
		border-radius: 10rpx;
		/* background-color: #007AFF; */
		box-shadow: 0rpx 0rpx 5rpx 0rpx #CCCCCC;
		display: flex;
		justify-content: center;
		align-items: center;
		justify-content: space-around;
	}
	.getMoney-box1-text2{
		display: flex;
		text-align: center;
		line-height: 38rpx;
		margin-top: 10rpx;
	}
	.xinyong{
		width: 90rpx;
		height: 38rpx;
		font-size: 20rpx;
		border: 2rpx solid #3476F1;
		border-radius: 4rpx;
		color: #3476F1;
		margin-right: 15rpx;
	}
	.edu{
		width: 106rpx;
		height: 38rpx;
		font-size: 20rpx;
		border: 2rpx solid #53b6c8;
		border-radius: 4rpx;
		color: #53b6c8;
		margin-right: 15rpx;
	}
	.jiehuan{
		width: 106rpx;
		height: 38rpx;
		font-size: 20rpx;
		border: 2rpx solid #54a8ee;
		border-radius: 4rpx;
		color: #54a8ee;
		margin-right: 15rpx;
	}
	.topedu{
		color: #CCCCCC;
		font-size: 24rpx;
		vertical-align: middle;
		margin-right: 15rpx;
	}
	.topprice{
		color: #f95c5c;
		vertical-align: middle;
	}
	.getMoney-box1{
		display: flex;
		flex-direction: column;
	}
	.fuwu{
		color: #CCCCCC;
		font-size: 24rpx;
		margin-left: 15rpx;
	}
	.getMoney-box2{
		width: 174rpx;
		height: 64rpx;
		background-color: #3476F1;
		color: #FFFFFF;
		font-size: 28rpx;
		text-align: center;
		border-radius: 40rpx;
		line-height: 64rpx;
	}
	.rixi{
		width: 146rpx;
		height: 38rpx;
		color: #3476F1;
		border: 2rpx solid #3476f1;
		font-size: 20rpx;
		border-radius: 4rpx;
		line-height: 38rpx;
		text-align: center;
		margin-right: 15rpx;
	}
	.daozhang{
		width: 146rpx;
		height: 38rpx;
		color: #53B6C8;
		border: 2rpx solid #53B6C8;
		font-size: 20rpx;
		border-radius: 4rpx;
		line-height: 38rpx;
		text-align: center;
		margin-right: 15rpx;
	}
	.shengxin-bottom{
		width: 320rpx;
		margin-top: 10rpx;
		display: flex;
		justify-content: space-around;
	}
</style>
